<template>
  <el-popover
    v-if="props.title"
    :title="props.title"
    :content="props.content"
    v-bind="props.attributes ? props.attributes : {}"
    v-on="props.events ? props.events : {}"
  >
    <slot></slot>
    <template #reference>
      <slot name="reference">
        <el-icon
          class="!h-full cursor-pointer "
          :class="props.iconClass ? props.iconClass : ''"
          :color="iconColor"
        >
          <InfoFilled v-if="props.type === ArkTipType.INFO"/>
          <SuccessFilled v-else-if="props.type === ArkTipType.SUCCESS"/>
          <WarningFilled v-else-if="props.type === ArkTipType.WARNING"/>
          <CircleCloseFilled v-else-if="props.type === ArkTipType.ERROR"/>
          <QuestionFilled v-else/>
        </el-icon>
      </slot>
    </template>
  </el-popover>

  <el-tooltip
    v-else
    :content="props.content"
    v-bind="props.attributes ? props.attributes : {}"
    v-on="props.events ? props.events : {}"
  >
    <slot name="reference">
      <el-icon
        class="!h-full cursor-help"
        :class="props.iconClass ? props.iconClass : ''"
        :color="iconColor"
      >
        <InfoFilled v-if="props.type === ArkTipType.INFO"/>
        <SuccessFilled v-else-if="props.type === ArkTipType.SUCCESS"/>
        <WarningFilled v-else-if="props.type === ArkTipType.WARNING"/>
        <CircleCloseFilled v-else-if="props.type === ArkTipType.ERROR"/>
        <QuestionFilled v-else/>
      </el-icon>
    </slot>

    <template #content>
      <slot>
        {{ props.content }}
      </slot>
    </template>
  </el-tooltip>
</template>

<script setup lang="ts">
import {onBeforeMount, onBeforeUnmount, onMounted, PropType,} from "vue";
import {CircleCloseFilled, InfoFilled, QuestionFilled, SuccessFilled, WarningFilled} from "@element-plus/icons-vue";
import ArkTipType from "../../common-type/ark-tip-type";

/** 组合（向选项里合并 property）。包括：provide、inject、extends、mixins */

/** 接口（组件的接口）。包括：defineOptions、defineModel、defineProps、defineEmits、defineExpose、defineSlots */
const props = defineProps({
  title: String,
  content: {
    type: String,
    required: true
  },
  type: Object as PropType<ArkTipType>,
  iconClass: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
  iconColor: String,
  attributes: Object as PropType<Record<string, any>>,
  events: Object as PropType<Record<string, any>>,
});

/** 本地状态 (本地的响应式 property)。包括：ref、computed */

/** 事件（通过响应式事件触发的回调）。包括：watch */

/** 生命周期钩子（按照它们被调用的顺序）。包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted */
onBeforeMount(() => {
});

onMounted(() => {
});

onBeforeUnmount(() => {
});

/** 非响应式的 property (不依赖响应系统的实例 property)。包括：常规函数 */

/** 其它 */
</script>

<style scoped></style>
